﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <%@ include file="../admin/top.jsp" %>

    <style>
        .li_style {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-top: 20px;
            height: 50px;
            padding-left: 50px;
            float: left;
        }

        .ul_style {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-top: 20px;
            height: 50px;
            padding-left: 50px;
        }

        #notifyId {
            margin-left: 20px;
            margin-top: 7px;
            width: 50%;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="main-container">
    <div id="page-content" class="clearfix">
        <div class="row-fluid">
            <div class="row-fluid">
                <!-- 检索  -->
                <form action="">
                    <div style="width: 80%; padding-top: 50px; padding-left: 50px">
                        <span style="font-size: 18px;font-weight: bold">消息选择</span>
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;">
                                <font color='red'>*</font>
                                消息选择:
                            </label>
                            <a class='btn btn-mini btn-danger' id="notifyIdSel" style="margin-left: 20px"
                               data-toggle="modal" data-target="#myModal" onclick="notifySelect()">
                                消息选择
                            </a>
                            <input type="text" name="notifyId" id="notifyId" value="" readonly>
                        </ul>
                    </div>
                    <div style="width: 80%; padding-top: 50px; padding-left: 50px">
                        <span style="font-size: 18px;font-weight: bold">目标人群</span>
                        <ul class="ul_style" id="">
                            <label class="li_style" style="margin-left: -50px;">
                                <font color='red'>*</font>
                                目标类型:
                            </label>
                            <label style="float:left;padding-left: 32px;margin-top: 15px">
                                <input name="target" type="radio" value="1" onclick="targetCli(this)" checked>
                                <span class="lbl">全部人群</span>
                            </label>
                            <label style="float:left;padding-left: 32px;margin-top: 15px">
                                <input name="target" type="radio" value="2" onclick="targetCli(this)">
                                <span class="lbl">精准</span>
                            </label>
                        </ul>
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;">
                                <font color='red'>*</font>
                                目标用户:
                            </label>
                            <span id="guangbo"
                                  style="margin-top: 18px; margin-left: 20px; width: 70%; float: left">广播</span>
                            <span id="wenjian"
                                  style="display: none; margin-top: 18px; margin-left: 20px; width: 70%; float: left">
								<input type="file" name="file" id="file" onchange="">
								<span style="font-size: 14px">请上传不超过30M的Excel文件(utf-8编码); 每行一个uuid</span>
							</span>
                        </ul>
                    </div>
                    <div style="width: 80%; padding-top: 50px; padding-left: 50px">
                        <span style="font-size: 18px;font-weight: bold">推送设置</span>
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;">
                                <font color='red'>*</font>
                                发送时间:
                            </label>
                            <label style="float:left;padding-left: 32px;margin-top: 15px">
                                <input name="taskCron" type="radio" value="0" onclick="taskCronCli(this)" checked>
                                <span class="lbl">即时发送</span>
                            </label>
                            <label style="float:left;padding-left: 32px;margin-top: 15px">
                                <input name="taskCron" type="radio" value="1" onclick="taskCronCli(this)">
                                <span class="lbl">定时发送</span>
                            </label>
                            <span id="timeSpan"
                                  style="display: none; margin-top: 18px; margin-left: 20px; width: 60%; float: left">
								<input class="span10 date-time-picker" name="sendTime" id="sendTime" type="text"
                                       data-date-format="yyyy-mm-dd hh:ii" readonly="readonly"
                                       style="width:160px;display: table-cell;font-size: 13px;float:left;"/>
								<span style="font-size: 15px">必须是当前1小时之后</span>
							</span>
                        </ul>
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;">
                                <font color='red'>*</font>
                                定速发送:
                            </label>
                            <label style="float:left;padding-left: 32px;margin-top: 15px">
                                <input name="speedType" type="radio" value="1" onclick="speedTypeCli(this)">
                                <span class="lbl">是</span>
                            </label>
                            <label style="float:left;padding-left: 32px;margin-top: 15px">
                                <input name="speedType" type="radio" value="0" onclick="speedTypeCli(this)" checked>
                                <span class="lbl">否</span>
                            </label>
                            <span id="speedSpan"
                                  style="display: none; margin-top: 18px; margin-left: 20px; width: 50%; float: left">
								<input name="speed" id="speed" type="number" style="width: 100px"/>
								<span style="font-size: 15px">/每秒  （支持每秒1~5000条消息）</span>
							</span>
                        </ul>
                        <ul class="ul_style">
                            <label class="li_style" style="margin-left: -50px;">
                                <font color='red'>*</font>
                                离线消息:
                            </label>
                            <label style="float:left;padding-left: 32px;margin-top: 15px">
                                <input name="offlineType" type="radio" value="1" onclick="offlineTypeCli(this)" checked>
                                <span class="lbl">是</span>
                            </label>
                            <label style="float:left;padding-left: 32px;margin-top: 15px">
                                <input name="offlineType" type="radio" value="0" onclick="offlineTypeCli(this)">
                                <span class="lbl">否</span>
                            </label>
                        </ul>
                        <ul class="ul_style" id="ulDay">
                            <label class="li_style" style="margin-left: -50px;">
                                <font color='red'>*</font>
                                有效天数:
                            </label>
                            <select class="form-control in-block" name="offlineSeconds" id="offlineSeconds"
                                    style="width: 20%;margin-left: 30px;margin-top: 15px;float: left;">
                                <option value="1" selected>1天</option>
                                <option value="2">2天</option>
                                <option value="3">3天</option>
                            </select>
                        </ul>
                        <ul class="ul_style" id="ulDay">
                            <label class="li_style" style="margin-left: -50px;">
                                <font color='red'>*</font>
                                ios推送环境:
                            </label>
                            <select class="form-control in-block" name="iosProduction" id="iosProduction"
                                    style="width: 20%;margin-left: 30px;margin-top: 15px;float: left;">
                                <option value=1 selected>生产环境</option>
                                <option value=0>测试环境</option>
                            </select>
                        </ul>
                    </div>
                    <div style="font-size: 14px;color: red; white-space: pre-wrap">
                        <span id="msgHint"
                              style="display: none;float: left;margin-right: 10px;width: 95%;white-space: normal"></span>
                    </div>
                    <br/>
                    <div style="margin-top: 30px;margin-left: 100px">
                        <input class="btn btn-primary" type="button" onclick="save()" value='立即发送' id="submitBut">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div id="myModal" class="modal fade" role="dialog" aria-hidden="true" style="width: 900px; left: 35%;display: none">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">消息选择</h4>
            </div>
            <div class="modal-body">
                <div id="zhongxin" class="zhongxin-cla">
                    <div style="padding: 5px 5px 5px 5px">
                        <form action="">
                            <table style="width: 500px">
                                <tr>
                                    <td>
										<span class="input-icon">
											<input style="margin-top: 0px;width: 85%" autocomplete="off" type="text"
                                                   name="title" value='${title}' placeholder="标题"
                                                   id="nav-search-input"/>
										</span>
                                    </td>
                                    <td style="vertical-align:top;">
                                        <button class="btn btn-mini btn-light" type="button" onclick="notifySelect();"
                                                title="检索">
                                            <i id="nav-search-icon" class="icon-search"></i>
                                        </button>
                                    </td>
                                </tr>
                            </table>
                            <table id="table_report" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>通知标题</th>
                                    <th>通知内容</th>
                                    <th class="center">操作</th>
                                </tr>
                                </thead>
                                <tbody id="contentTbody">

                                </tbody>
                            </table>
                        </form>
                    </div>
                    <div id="zhongxin2" class="center" style="display:none">
                        <br/><br/><br/><img src="static/images/jiazai.gif"/><br/>
                        <h4 class="lighter block green"></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 返回顶部  -->
<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
    <i class="icon-double-angle-up icon-only"></i>
</a>
<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>

<script type="text/javascript" src="static/js/chosen.jquery.min.js"></script><!-- 下拉框 -->
<script type="text/javascript" src="static/js/bootbox.min.js"></script><!-- 确认窗口 -->
<script type="text/javascript" src="static/js/bootstrap-datetimepicker.min.js"></script><!-- 时间框 -->
<script type="text/javascript" src="static/js/bootstrap-datetimepicker.zh-CN.js"></script><!-- 时间框 -->
<!-- 引入 -->
<script type="text/javascript" src="static/js/jquery.tips.js"></script><!--提示框-->
<script type="text/javascript">
    $(top.hangge());
</script>

</body>
</html>

<script type="text/javascript">
    $(function () {
        //时间框
        $('.date-time-picker').datetimepicker({
            language: 'zh-CN',
            autoclose: true,
            todayBtn: true,
            minuteStep: 1
        });
        //下拉框
        $(".chzn-select").chosen();
        $(".chzn-select-deselect").chosen({allow_single_deselect: true});

    });

    //消息选择
    function notifySelect() {
        var title = $("#nav-search-input").val();
        var postParam = {"title": title};
        var url = "<%=basePath%>notify/listAllNotify";
        $.get(url, postParam, function (data) {
            if (data.code == 200) {
                var htmls = "";
                if (data.data) {
                    $.each(data.data, function (i, val) {
                        htmls += '<tr style="text-align: center">'
                        htmls += '<td>' + val.id + '</td>'
                        htmls += '<td>' + val.title + '</td>'
                        htmls += '<td>' + val.content + '</td>'
                        htmls += '<td style="width: 60px;"><a class="btn btn-mini btn-danger" data-dismiss="modal" title="选择" onclick="sel(\'' + val.id + '\')">选择</a></td>'
                        htmls += '</tr>'
                    })
                } else {
                    htmls = '<tr class="main_info"><td colspan="10" class="center">没有相关数据</td></tr>'
                }
                $("#contentTbody").html(htmls)
            } else {
                alert(data.msg)
            }
        });
    }

    function sel(id) {
        if (id) {
            $("#notifyId").val(id);
            $("#myModal").css("display", "none");
            $("#nav-search-input").val("");
        }
    }

    function targetCli(obj) {
        var target = $(obj).val();
        if (target == 1) {
            $("#wenjian").css("display", "none")
            $("#guangbo").css("display", "block")
        } else if (target == 2) {
            $("#guangbo").css("display", "none")
            $("#wenjian").css("display", "block")
        }
    }

    function taskCronCli(obj) {
        var type = $(obj).val();
        if (type == 0) {
            $("#timeSpan").css("display", "none")
        } else if (type == 1) {
            $("#timeSpan").css("display", "block")
        }
    }

    function speedTypeCli(obj) {
        var type = $(obj).val();
        if (type == 1) {
            $("#speedSpan").css("display", "block")
        } else if (type == 0) {
            $("#speedSpan").css("display", "none")
        }
    }

    function offlineTypeCli(obj) {
        var type = $(obj).val();
        if (type == 1) {
            $("#ulDay").css("display", "block")
        } else if (type == 0) {
            $("#ulDay").css("display", "none")
        }
    }

    //保存
    function save() {
        var formData = new FormData();
        var notifyId = $("#notifyId").val();
        if (!notifyId) {
            $("#notifyIdSel").tips({
                side: 3,
                msg: '请选择消息',
                bg: '#AE81FF',
                time: 2
            });
            $("#notifyIdSel").focus();
            return false;
        }
        formData.append("notifyId", notifyId);
        var target = $("input[name='target']:checked").val();
        if (target == 2) {
            var fileObj = $('#file').get(0).files[0];
            if (!fileObj) {
                $("#file").tips({
                    side: 3,
                    msg: '请选择文件',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#file").focus();
                return false;
            }
            formData.append("file", fileObj);
        }
        formData.append("target", target);
        var taskCron = $("input[name='taskCron']:checked").val();
        if (taskCron == 1) {
            var sendTime = $("#sendTime").val();
            if (!sendTime) {
                $("#sendTime").tips({
                    side: 3,
                    msg: '请选择时间',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#sendTime").focus();
                return false;
            }
            var taskTime = Date.parse(new Date(sendTime));
            if (taskTime < Date.parse(new Date()) + 60 * 60 * 1000) {
                $("#sendTime").tips({
                    side: 3,
                    msg: '选择时间必须为当前1小时之后',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#sendTime").focus();
                return false;
            }
            formData.append("taskTime", taskTime);
        }
        formData.append("taskCron", taskCron);
        var speed = 0;
        var speedType = $("input[name='speedType']:checked").val();
        if (speedType == 1) {
            speed = $("#speed").val();
            if (!speed) {
                $("#speed").tips({
                    side: 3,
                    msg: '请输入消息数量',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#speed").focus();
                return false;
            }
            if (speed > 5000 || speed < 1) {
                $("#speed").tips({
                    side: 3,
                    msg: '请输入1-5000的消息数量',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#speed").focus();
                return false;
            }
        }
        formData.append("speed", speed);
        var offlineSeconds = 0;
        var offlineType = $("input[name='offlineType']:checked").val();
        if (offlineType == 1) {
            offlineSeconds = $("#offlineSeconds").val();
        }
        formData.append("offlineSeconds", offlineSeconds * 24 * 60 * 60);
        formData.append("iosProduction", $("#iosProduction").val());

        $("#submitBut").attr("disabled", true);
        $("#msgHint").css("display", "block");
        $("#msgHint").text("正在发送，请耐心等待！");
        //
        $.ajax({
            type: "post",
            url: "/notifyPush/add",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                $("#submitBut").attr("disabled", false);
                $("#msgHint").css("display", "block");
                $("#msgHint").css("white-space", "pre-wrap");
                $("#msgHint").text(data.msg);
            }
        })
    }
</script>
